{% extends "geonode_base.html" %}
{% load static %}
{% load i18n %}
{% load bootstrap_tags %}

{% block title %}{% trans "Create Message" %} — {{ block.super }}{% endblock %}

{% block body %}
    <h3>{% trans "Create Message" %}</h3>
    <form id="msg_form" method="post" action="{% url 'message_create' %}">
        {% csrf_token %}
        {% if form.non_field_errors %}
            <div class="alert alert-danger">
                {% if form_error_title %}
                    <strong>{{ form_error_title }}</strong><br/>
                {% endif %}
                {% if form.non_field_errors|length == 1 %}
                    {{ form.non_field_errors|first }}
                {% else %}
                    {{ form.non_field_errors }}
                {% endif %}
            </div>
        {% endif %}
        <table width=100%>
            {% include 'user_messages/_field_group_header.html' with form=form field_name="to_users" %}
            <label for="id_to_users">{% trans "To users" %}</label>
            <input id="id_to_users" name="to_users" type="text" class="create-msg-form-control">
            {% include 'user_messages/_field_error_block.html' with form=form field_name="to_users" %}
            {# Begginig div is in the _field_group_header file#}
            </div>
            {% include 'user_messages/_field_group_header.html' with form=form field_name="to_groups" %}
            <label for="id_to_groups">{% trans "To groups" %}</label>
            <input id="id_to_groups" name="to_groups" type="text" class="create-msg-form-control">
            {% include 'user_messages/_field_error_block.html' with form=form field_name="to_groups" %}
            </div>
            {% include 'user_messages/_field_group_header.html' with form=form field_name="subject" %}
            <label for="id_subject">{% trans "Subject" %}</label>
            <input id="id_subject" name="subject" type="text" class="create-msg-form-control">
            {% include 'user_messages/_field_error_block.html' with form=form field_name="subject" %}
            </div>
            {% include 'user_messages/_field_group_header.html' with form=form field_name="content" %}
            <label for="id_content">{% trans "Content" %}</label>
            <textarea id="id_content" name="content" cols="40" rows="10"
                      required="" class="create-msg-form-control"></textarea>
            {% include 'user_messages/_field_error_block.html' with form=form field_name="content" %}

            </div>
        </table>
        <div class="form-actions">
            <input id="id_form_submit" type="submit" value="{% trans "Send message" %}" class="btn btn-primary"
                   type="button"/>
        </div>
    </form>
    <script src="{% static "geonode/js/messages/message_recipients_autocomplete_es5.js" %}"></script>
    <script src="{% static "lib/js/jquery.js" %}"></script>
    <script>

        document.addEventListener('DOMContentLoaded', function (event) {
            const user_input = document.getElementById('id_to_users');
            const blacklist = ["{{ request.user.username }}"];
            const user_tag = new MessageRecipientsTags(user_input, get_users_data,
                location.origin + '/api/profiles/?username__icontains=', blacklist);
            user_tag.init();

            const group_input = document.getElementById('id_to_groups');
            const group_tag = new MessageRecipientsTags(group_input, get_groups_data,
                location.origin + '/api/group_profile/?title__icontains=');
            group_tag.init();

            $('#id_form_submit').on('click', () => {
                user_tag.fixOutputValue();
                group_tag.fixOutputValue();
            })
        });

    </script>
{% endblock %}



{% block sidebar %}
    <a href="{% url "messages_inbox" %}" class="btn btn-primary" type="button">{% trans "Back to Inbox" %}</a>
{% endblock %}


